$(function () {
  // 1-首页数据渲染
  // 2-禁用启用
  // 3-分页

  var currentPage = 1; // 记录当前页
  var pageSize = 3; // 每页数据条数 

  // 1-首页数据渲染
  // 1- ajax去后台获取用户数据
  // 2- 用模板引擎 渲染返回的数据 

  function render () {
    $.ajax({
      type: 'get',
      url: '/user/queryUser',
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: 'json',
      success: function (res) {
        console.log('res:', res);
        // 渲染 
        $('tbody').html(template('tmp', res));
        // 根据后台返回的res.total ,动态生成分页标签
        setPage(res.total);
      }
    })
  }

  render();


  // 2-禁用启用
  // 1- 点击按钮，获取当前数据id， 获取要进行的操作 ，弹出模态框  
  // 2- 用户点击确定按钮时，通过ajax请求后台，进行对应操作 
  // 3- 页面重新渲染， 模态框隐藏  看到操作后结果

  var id = null; //存放当前用户id
  var isDelete = null; //存放用户要进行操作 

  $('tbody').on('click', '.btn', function () {
    // id = $(this).parent().attr('data-id');
    id = $(this).parent().data('id'); //用于快速获取 data-自定义属性的值 
    isDelete = $(this).hasClass('btn-danger') ? 0 : 1;
    // console.log(id, isDelete);
  })
  // 2- 用户点击确定按钮时，通过ajax请求后台，进行对应操作 
  // 3- 页面重新渲染， 模态框隐藏  看到操作后结果
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'post',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 页面重新渲染，
        render();
        // 模态框隐藏
        $('.modal-user').modal('hide');
      }
    })
  })

  // 3-分页 
  // 1- 先去后台 获取所有的数据总数， 根据总数算出数据的总页数 
  // 共有81条数据  一页10条 ：   总页码 = Math.ceil(数据总数 / 每页数据条数)
  // 2- 根据总页码 来动态生成分页标签 (用插件来实现)
  // total 表示数据库数据总数 
  function setPage (total) {
    // 生成分页标签 
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,//当前页
      totalPages: Math.ceil(total / pageSize),//总页数
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件   page:当前点击的页码
        console.log('page:', page);
        // 1-改变当前页取值 
        currentPage = page;
        // 2-根据当前页取值，重新渲染页面 
        render();
      }
    });
  }


});